<template>
	<!-- 1.0 搜索框 -->
	<view class="search-box">
		<view class="left">
			<input class="inp" type="text" placeholder="请输入关键字">
			<image class="img" src="../../static/i_delete.png" mode="widthFix"></image>
		</view>
		<view class="right">
			<button class="btn">搜索</button>
		</view>
	</view>
	
	<!-- 2.0 列表 -->
	<view class="search-list" v-if="isShow">
		<view class="list-item" v-for="item in 10">
			 <navigator url="/pages/detail/detail" class="link">
				 列表{{item}}
			 </navigator>
		</view>
	</view>
	
	<!-- 3.0 给用户反馈 -->
	<view class="search-message" v-else>
		 <text>没有搜索结果~~</text>
	</view>
	
	
	
</template>

<script setup>
	import { ref } from 'vue';

	// 定义布尔值
	const isShow = ref(true)
	
	

</script>

<style lang="scss">
	// 长度单位
	// rpx 相对值单位  (为了更好做移动端适配)
	// px  绝对值单位
	// 375px 屏幕下     1rpx  = 0.5px   20rpx   = 10px
	
	// 1.0 输入框
	// 类名选择器 { 属性: 属性值; }
	.search-box {
		// 宽度
		width: 100%;
		// 内边距
		padding: 20rpx  30rpx;
		// 改变盒子大小计算方式
		box-sizing: border-box;
		// 设置弹性布局
		display: flex;
		// 类名选择器 
		.left {
			// 宽度    （calc 动态计算方法）
			width: calc(100% - 120rpx);
			// 高度
			height: 80rpx;
			// 相对定位
			position: relative;
			// 边框
			border: 1px solid #ccc;
			// 类名选择器 
			.inp {
				width: 100%;
				height: 80rpx;
				// 设置块容器
				display: block;
				// 设置左边内边距
				padding-left: 20rpx;
				box-sizing: border-box;
			}
			.img {
				width: 40rpx;
				height: 40rpx;
				// 设置绝对定位
				position: absolute;
				// 水平方向 右侧的位置
				right: 10rpx;
				// 垂直方向 顶部位置
				top: 20rpx;
			}
		}
		.right {
			.btn {
				width: 120rpx; // 60px
				height: 80rpx; // 40px
				// 行高
				line-height: 80rpx;
				// 内边距为0
				padding: 0;
				// 外边距为0
				margin: 0;
				// 字体颜色
				color: #666;
				// transparent: 透明
				// 背景色
				background-color: transparent;
				// 边框为0
				border: 0;
				// 伪类元素
				&::after {
					border: 0;
				}
			}
		}
	}
	
	// 2.0 列表
	.search-list {
		padding: 0 30rpx;
		.list-item {
			width: 100%;
			.link {
				display: block;
				width: 100%;
				padding: 30rpx 10rpx;
				border-bottom: 1px dashed #ccc;
			}
		}
	}
	
	// 3.0 反馈
	.search-message {
		width: 100%;
		// 文本水平居中
		text-align: center;
		padding: 50rpx 0;
		color: #666;
	}
	
</style>
